<template>
  <div>
    <HelloWorld :data="list1">
      <template #title>
        本周热搜 TOP5
      </template>
      <template #ranking="{ item }">
        <td class="HotSearch">
          <span class="neiro">#{{ item.name }}</span>
          <span><img src="./assets/火花.jpg" alt="" /> {{ item.hot }}</span>
        </td>
      </template>
    </HelloWorld>
    <HelloWorld :data="list2">
      <template #title>
       可能感兴趣的人
      </template>
      <template #ranking="{ item }">
        <td class="recommend">
          <div><span  class="compellation">{{ item.name }}</span><span> {{ item.sex === 1 ? '♂' : '♀' }}</span><span> {{ item.age }}</span><button>+ 关注</button></div>
          <div>研究领域：{{ item.domain }}</div>
          <div> {{ item.college }}</div>
        </td>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      list1: [
        {
          id: 1,
          name: '区块链',
          hot: 96
        },
        {
          id: 2,
          name: '数据挖掘',
          hot: 91
        },
        {
          id: 3,
          name: '无人机',
          hot: 87
        },
        {
          id: 4,
          name: '生命科学',
          hot: 76
        },
        {
          id: 5,
          name: '传感器',
          hot: 60
        }
      ],
      list2: [
        {
          name: '李国盛',
          age: '52岁',
          sex: 1,
          domain: '机电一体化技术',
          college: '哈尔滨工业大学 ▪ 教授'
        },
        {
          name: '陈颖',
          age: '36岁',
          sex: 0,
          domain: '人工智能',
          college: '清华大学 ▪ 副教授'
        }
      ]
    }
  }
}
</script>

<style></style>
